<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../bootstrap-4.6.2/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-4.6.2/js/bootstrap.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        ul {
            margin: 0;
        }

        body {
            background-image: url("/images/register.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;

        }

        .login_po {
            height: 100%;
        }

        .login_form {
            width: 400px;
            height: 300px;
            color: purple;
            margin: 0 auto;
        }

        form {
            padding-top: 20px;
        }

        .title_form {
            text-align: center;
        }

        .sex p {
            display: block;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login_po w">
        <div class="login_form">
            <form>
                <div class="title_form">
                    <h2>注册账号</h2>
                </div>
                <div class="form-group">
                    <label for="username">学号:</label>
                    <input type="text" class="form-control" placeholder="请输入学号" id="username">
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="password">确认密码:</label>
                    <input type="password" class="form-control" id="password2" placeholder="请确认密码">
                </div>
                <div class="form-group">
                    <label for="name">姓名:</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="grade">年纪:</label>
                    <select class="form-control" id="grade">

                    </select>
                </div>
                <div class="form-group">
                    <label for="clazz">班级:</label>
                    <select class="form-control" id="clazz">
                    </select>
                </div>
                <div class="form-group">
                    <label for="tel">手机号:</label>
                    <input type="text" class="form-control" id="tel" placeholder="请输入手机号">
                </div>
                <div class="sex">
                    <p>性别:</p>
                    <input type="radio" value="nan" name="sex" checked id="nan">
                    <label class="form-check-label" for="nan">男</label>
                    <input type="radio" value="nv" name="sex" id="nv">
                    <label class="form-check-label" for="nv">女</label>
                </div>
                <div class="qq">
                    <label for="tel">qq号码:</label>
                    <input type="text" class="form-control" id="qq" placeholder="请输入qq号码">
                </div>
                <div style="margin-top: 5px">
                    <input style="float: left" type="button" onclick="stuRegister()" class="btn btn-primary" value="注册">
                    <a style="float: right" href="../index.jsp" class="btn btn-primary">返回</a>
                </div>
            </form>
        </div>
    </div>

</div>
<script type="text/javascript">
    getGrade();
    getClazz();

    function getGrade() {
        $.ajax({
            url: "http://localhost:8080/getAllGradeServlet",
            type: "POST",
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    $("#grade").empty();
                    for (let i = 0; i < json.data.length; i++) {
                        const grade = json.data[i];
                        $("#grade").append("<option>" + grade.gname + "</option>");
                    }
                }
            }
        });
    }

    function getClazz() {
        $.ajax({
            url: "http://localhost:8080/getAllClazzServlet",
            type: "POST",
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    $("#clazz").empty();
                    for (let i = 0; i < json.data.length; i++) {
                        const clazz = json.data[i];
                        $("#clazz").append("<option>" + clazz.cName + "</option>");
                    }
                }
            }
        });
    }

    function stuRegister() {
        let stuNum = $("#username").val();
        let password = $("#password").val();
        let password2 = $("#password2").val();
        let name = $("#name").val();
        let grade = $("#grade").val();
        let clazz = $("#clazz").val();
        let tel = $("#tel").val();
        let sex = $('input[name="sex"]:checked').val();
        let qq = $("#qq").val();
        if (password==password2){
            $.ajax({
                url: "http://localhost:8080/RegisterServlet",
                type: "POST",
                data: {
                    sNum:stuNum,
                    password:password,
                    sName:name,
                    grade:grade,
                    clazz:clazz,
                    tel:tel,
                    sex:sex,
                    qq:qq
                },
                dataType: "json",
                success: function (json) {
                    if (json.code == 200) {
                        alert(json.msg);
                        location.href="../index.jsp";
                    } else {
                        alert(json.msg);
                    }
                }
            });
        }else {
            alert("两次密码不一致!")
        }

    }
</script>
</body>
</html>